<template>
  <el-container  >
    <el-header>
      <div class="block">
    <el-date-picker
      v-model="value4"
      type="month"
      placeholder="选择月份"
      value-format="yyyy-MM"
     @change="changeMonth" class="main">
    </el-date-picker>
  <el-button type="primary" icon="el-icon-search" @click="searchRes">搜索</el-button>

  </div>
    </el-header>
    <el-main>
      <my-table v-if="Object.keys(dataObj).length>0" :dataObj="dataObj"></my-table>
      <span class="tip" v-if="err==true">抱歉！未查询到相关数据，请核对您输入的月份或联系管理员</span>
      
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios"
import MyTable from "./table"
export default {
  name: 'User',
  data () {
    return {
      value4:"",
      dataObj:{},
      err:false
    }
  },
  components:{
    MyTable
  },
  methods:{
    changeMonth:function(val){
      this.$store.commit("changeMonth",val)
      
    },
    searchRes:function(){
      let data=this.$store.state.month
      if(!data){
         this.$message('请选择月份');
         return
      }
      
      let url="/wages/getWagesByNumber"
      let formData=new FormData()
      formData.append("personNumber","admin")
      formData.append("sheetName[]",data)
      axios.post(url,formData,{
        headers:{
          "Content-Type":"application/x-www-form-urlencoded"
        }
      }).then(res=>{
        if(res.data.data.wagesInfoVoList.length>0){
          this.dataObj=res.data.data.wagesInfoVoList[0]
          this.err=false
        }else{
          this.dataObj=[]
          this.err=true
          
        }
        
      },err=>{
        console.log(err)
      })
      
    } ,
     
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tip{
  font-family: Microsoft YaHei
}
/* .text{
  width: 10%
}
.main{
  width: 60%
}
.btn{
  width: 10%;
  text-align: center
} */
</style>
